<template lang="html">
  <div id="pageBox" v-if="!pageLoading">
    <div class="spread"><router-link :to="{ path: '/generalize', query: { id: detail.id, openid: detail.openid } }">赚{{ detail.brokerage }}元</router-link></div>
    <div id="page">
      <div class="bannerBox">
        <img :src="detail.coverImg" alt="">
      </div>
      <div class="detailTitle pd14">
        {{ detail.title }}
      </div>
      <div class="titleNote pd14">
        <div class="reAndHeat">
          <span class="re">已更新{{detail.updatePhase}}期 共{{detail.totalPhase}}期 &nbsp;|&nbsp; </span>
          <span class="heat">{{detail.popularity}}人气</span>
        </div>
        <div class="tagBox">
          <span v-if="detail.repeatListen" class="tagItem">
            <i class="iconfont icon-gou"></i> 永久回听
          </span>
          <span class="tagItem">
            <i class="iconfont icon-gou"></i> {{ detail.totalPhase === detail.updatedPhase ? '已完结' : '即将更新' }}
          </span>
        </div>
        <div class="moneyBox">
          ¥ {{ detail.price }}
        </div>
      </div>
      <div class="navBoxHidden" v-show="navFixed"></div>
      <div id="navBox" class="navBox pd14" :class="{navFixed:navFixed}" ref="nav">
        <ul class="navList">
          <li class="navItem" :class="{active:nowTab==1}">
            <span @click="tabChange(1)">简介</span>
          </li>
          <li class="navItem" :class="{active:nowTab==2}">
            <span @click="tabChange(2)">目录</span>
          </li>
          <li class="navItem" :class="{active:nowTab==3}">
            <span @click="tabChange(3)">评论</span>
          </li>
        </ul>
      </div>
      <div class="tabPage">
        <ul class="pageList pd14">
          <li class="pageList" v-show="nowTab==1">
            <div class="comTitle">简介</div>
            <div class="concise">
              <div>{{ detail.intro }}</div>
              <div v-html="detail.content"></div>
            </div>
          </li>
          <li class="pageList" v-show="nowTab==2">
            <div class="comTitle">专栏课程</div>
            <Catalog :catalogList="catalogList" :lastPage="catalogLastPage"></Catalog>
          </li>
          <li class="pageList" v-show="nowTab==3">
            <div class="comTitle">用户评论</div>
            <Comment :commentList="commentList" :lastPage="commentLastPage" @more="onMore"></Comment>
          </li>
        </ul>
      </div>
      <div class="footBox">
        <div class="collection" @click="collectFun">
          <div class="iconBox">
            <i class="iconfont" :class="{'icon-shoucang0':!colloct,'icon-shoucang1':colloct}"></i>
          </div>
          <div class="collectText">收藏</div>
        </div>
        <div v-if="!isBuy" class="subscribe" @click="onPay">
          订阅专栏
        </div>
        <div v-if="isBuy" class="subscribe" @click="showComment = !showComment">
          添加评论
        </div>
      </div>
      <div class="action" @click="actionShow=true">
        <i class="iconfont icon-gengduo importantColor"></i>
      </div>
      <div class="actionPage" v-show="actionShow"  @click.self="actionShow=false"></div>
      <div class="actionBtnBox" :class="{show:actionShow,hidden:!actionShow}">
        <div class="btnItem">
          <div class="iconBox">
            <i class="iconfont icon-kefu importantColor"></i>
          </div>
          <span class="name">联系客服</span>
        </div>
        <div class="btnItem">
          <div class="iconBox" @click="goHome">
            <i class="iconfont icon-shouye importantColor"></i>
          </div>
          <span class="name">回到首页</span>
        </div>
      </div>
    </div>
    <div v-if="showComment" class="comment-modal" @click="showComment = false">
      <div class="comment-main" @click.stop>
        <textarea v-model="commentText"></textarea>
        <span class="submitComment" @click="submitComment">提交评论</span>
      </div>
    </div>
    <CouponModal :couponList="coupon" :couponVisibile="couponVisibile" tishiTxt="点击使用" @onClickCoupon="onClickCoupon" @onClose="couponVisibile = false">
      <div class="nocoupon">
        <span @click="buildOrder">不使用优惠券</span>
      </div>
    </CouponModal>
  </div>
</template>

<script>
import Catalog from "@/components/catalog";
import Comment from "@/components/comment";
import CouponModal from "@/components/couponModal"
import { getInfo, getComment, isCollect, addCollect, cancelCollect, wechatPay, addComment, getCpnpop } from '@/api/project'
import { getIsBuy } from '@/api/order'
import { getUnit } from '@/api/unit'
export default {
  components:{
    Catalog,
    Comment,
    CouponModal
  },
  data(){
    return {
      id: this.$route.query.id,
      detail: {},
      catalogList:[],
      commentList:[],
      nowTab:1,
      fStatus:2,
      pageLoading:true,
      navFixed:false,
      actionShow:false,
      colloct:false,
      form: {
        page: 1,
        limit: 10,
      },
      isBuy: false,
      showComment: false,
      commentText: '',
      coupon: [],
      couponVisibile: false,
    }
  },
  computed: {
    catalogLastPage() {
      return this.catalogList.length < this.form.page * this.form.limit
    },
    commentLastPage() {
      return this.commentList.length < this.form.page * this.form.limit
    }
  },
  watch:{
    '$route'(to, from) {
        if(to.name === '详情'){
          this.init();
        }
    }
  },
  mounted(){
    this.getInfoData();
    this.isCollect()
    this.getUnit()
    this.getComment()

  },
  methods:{
    // 回到首页
    goHome(){
      this.$router.push({
        path:"/"
      })
    },
    tabChange(tabNum){
      this.nowTab = tabNum;
      this.form = {
        page: 1,
        limit: 10,
      }
    },
    getUnit() {
      getUnit(this.id, { limit: 99 }).then(res => {
        this.catalogList = res.page.list;
      })
    },
    getComment() {
      getComment(this.id, this.form).then(res => {
        this.commentList = res.page.list;
      })
    },
    getIsBuy() {
      getIsBuy(this.id).then(res => {
        this.isBuy = res.isBuyProject
      })
    },
    // 点击关注
    // followFun(){
    //   if(this.fStatus == 1){
    //     this.fStatus = 2;
    //   }else{
    //     this.fStatus = 1;
    //   }
    // },
    // 收藏
    collectFun(){
      console.log(this.colloct)
      this.colloct ? this.cancelCollect() : this.addCollect()
    },
    isCollect() {
      isCollect(this.id).then(res => {
        this.colloct = res.data
      })
    },
    addCollect() {
      addCollect(this.id).then(res => {
        this.colloct = true;
      })
    },
    cancelCollect() {
      cancelCollect([this.id]).then(res => {
        this.colloct = false;
      })
    },
    // 获取详情数据
    getInfoData(){
      this.pageLoading = true;
      getInfo(this.id).then(res => {
        this.pageLoading = false;
        this.detail = res.project
        this.$nextTick(()=>{
          this.windwoScroll();
        })
        this.getIsBuy()
      })
    },
    windwoScroll(){
      let navOffsetTop = this.$refs.nav.offsetTop;
      window.onscroll = () => {
        let winScrollY = window.scrollY;
        if(navOffsetTop <= winScrollY){
          this.navFixed = true;
        }else{
          this.navFixed = false;
        }
      }
    },
    onPay() {
      this.getCoupon().then(res => {
        if (!res.data || !res.data.length) {
          this.buildOrder()
          this.couponVisibile = false
          return
        }
        this.coupon = res.data
        this.couponVisibile = true
      })
    },
    onClickCoupon(id) {
      this.buildOrder({couponId: id})
    },
    getCoupon() {
      return getCpnpop(this.id)
    },
    buildOrder(params) {
      wechatPay(this.id, params).then(res => {
        console.log(res)
        this.onBridgeReady(res.data)
      })
    },
    onBridgeReady(options){
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', options,
        function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            console.log('订阅成功')
            alert('订阅成功')
          } else {
            console.log('pay result', res)
            alert('订阅失败')
            console.log('订阅成功')
          }
      });
    },
    submitComment() {
      if (!this.commentText || !this.id) {
        return
      }
      const data = {
        context: this.commentText,
        projectId: this.id
      }
      addComment(data).then(res => {
        alert('评论成功')
        this.showComment = false
        this.getComment()
      })
    },
    onMore() {
      this.form.page++
      this.getComment()
    }
  },
}
</script>

<style lang="less" scoped>
  #pageBox{
    #page{
      padding-bottom:0.56rem;
      .comTitle{
        font-size:0.18rem;
        font-weight: bold;
        margin:20px 0;
      }
      .bannerBox{
        height:1.85rem;
        img{
          width:100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .detailTitle{
        margin-top:20px;
        width:100%;
        height:0.48rem;
        line-height: 0.24rem;
        font-size:0.18rem;
        font-weight: bold;
        color:#000;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .titleNote{
        margin-top:10px;
        position:relative;
        padding-bottom:20px;
        border-bottom:1px solid #dedede;
        .reAndHeat{
          font-size:0.13rem;
          .re{
            color:#999;
          }
          .heat{
            color:red;
          }
        }
        .tagBox{
          margin-top:4px;
          .tagItem{
            color:#999;
            font-size:0.13rem;
            margin-right:10px;
            i{
              color:#30C957;
            }
          }
        }
        .moneyBox{
          position:absolute;
          bottom:20px;
          right:0.24rem;
          line-height: 0.2rem;
          font-size:0.2rem;
          font-weight: bold;
          color:red;
        }
      }
      .navBoxHidden{
        height:60px;
      }
      .navBox{
        width:100%;
        border-bottom:1px solid #dedede;
        &.navFixed{
          position:fixed;
          top:0;
          left:0;
          background:#f9f9f9;
          z-index: 100;
        }
        .navList{
          width:100%;
          display: flex;
          .navItem{
            flex:1;
            text-align: center;
            span{
              line-height: 60px;
              font-size:18px;
              font-weight: bold;
            }
            &.active{
              span{
                position:relative;
                display: inline-block;
                height:100%;
                color:#31c27c;
                &:after{
                  position:absolute;
                  left:0;
                  bottom:-1px;
                  content:"";
                  width:100%;
                  height:2px;
                  background:#31c27c;
                }
              }
            }
          }
        }
      }
      .followOther{
        width:100%;
        margin:20px 0;
        .followBox{
          width:100%;
          height:90px;
          padding:15px;
          border-radius: 8px;
          padding-right:70px;
          box-shadow: 0 0 14px 4px #ededed;
          position:relative;
          display: flex;
          .imgBox{
            width:60px;
            height:60px;
            background:#999;
            border-radius: 50%;
          }
          .followContent{
            flex:1;
            padding:0 10px;
            overflow:hidden;
            padding-top:2px;
            .followTitle{
              width:100%;
              font-size:20px;
              font-weight: bold;
            }
            .followNote{
              font-size:14px;
              color:#999;
            }
          }
          .btnBox{
            position:absolute;
            width:60px;
            height:24px;
            right:14px;
            top:50%;
            margin-top:-12px;
            font-size:12px;
            line-height: 24px;
            text-align: center;
            border-radius: 12px;
            border:1px solid #31c27c;
            &.noFollow{
              color:#31c27c;
            }
            &.follow{
              color:#fff;
              background:#c4c4c4;
              border-color:#c4c4c4;
            }
          }
        }
      }
      .footBox{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:0.56rem;
        display:flex;
        background:#fff;
        .collection{
          width:0.56rem;
          text-align: center;
          color:#666;
          padding-top:0.03rem;
          i{
            font-size:0.2rem;
            color:#999;
            &.icon-shoucang1{
              color:red;
            }
          }
          .iconfont{
            line-height: 0.3rem;
          }
          .collectText{
            font-size:0.12rem;
          }
        }
        .subscribe{
          flex:1;
          background:red;
          color:#fff;
          font-size:0.16rem;
          text-align: center;
          line-height: 0.56rem;
        }
      }
      .action{
        position:fixed;
        width:0.5rem;
        height:0.5rem;
        background:#fff;
        border-radius: 50%;
        box-shadow: 0 0 10px 1px #dedede;
        right:0.2rem;
        bottom:1rem;
        text-align: center;
        line-height: 0.5rem;
        z-index: 98;
        i{
          font-size:0.24rem;
        }
      }
      .actionPage{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,0.4);
        z-index: 99;
      }
      .actionBtnBox{
        position: fixed;
        left:0;
        bottom:0;
        width:100%;
        height:1.2rem;
        background:#fff;
        border-radius:10px 10px 0 0;
        display: flex;
        padding-top:0.2rem;
        transition: all ease-out 200ms;
        z-index: 100;
        &.show{
          transform: translateY(0);
        }
        &.hidden{
          transform: translateY(100%);
        }
        .btnItem{
          flex:1;
          text-align: center;
          .iconBox{
            width:0.6rem;
            height:0.6rem;
            border-radius: 50%;
            box-shadow: 0 0 10px 1px #dedede;
            margin:0 auto;
            line-height: 0.6rem;
            i{
              font-size:0.3rem;
            }
          }
          .name{
            display: inline-block;
            color:#999;
            font-size:0.12rem;
            margin-top:0.08rem;
          }
        }
      }
    }
  }
  .comment-modal{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
  }
  .comment-main{
    position: absolute;
    width: 80%;
    height: 2.4rem;
    border-radius: 10px;
    background: #fff;
    font-size: .14rem;
    color: #666;
    left: 10%;
    top: 50%;
    margin-top: -2rem;
    padding: .12rem;
    box-sizing: border-box;
    textarea{
      background: #efefef;
      color: #333;
      height: 1.5rem;
      width: 100%;
      border: 0;
      padding: .05rem .1rem;
      box-sizing: border-box;
    }
    .submitComment{
      display: block;
      width: 100%;
      height: .5rem;
      background: #efefef;
      border-radius: 10px;
      text-align: center;
      line-height: .5rem;
      max-resolution: .2rem;
    }
  }
  .nocoupon{
    text-align: right;
    font-size: .14rem;
    margin-top: .1rem;
    line-height: 2;
    span{
      display: inline-block;
    }
  }
</style>
<style>
.concise img{
  max-width: 100%;
}
</style>
